<template>
  <div class="info" :key = "$route.params.type">
         <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: `/company/${$route.params.type}/` }">{{nav[this.$route.params.type]}}</el-breadcrumb-item>
          <el-breadcrumb-item v-if="info.article_type">{{info.article_type[1]}}</el-breadcrumb-item>
        </el-breadcrumb>
         <el-row class="tac" :gutter="80">
          <!-- 侧边栏 -->
        <el-col :span="6" class="news-nav hidden-xs-only" style="margin-top: 40px">
          <div class="title-top">
            <h5>{{nav[this.$route.params.type]}}</h5>
            <p>{{$route.params.type.toUpperCase()}}</p>
          </div>
          <el-menu
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            :router="true"
            >
            <el-menu-item v-for="(item, i) in navLeft[$route.params.type]" :key="i" :index="`/info/${$route.params.type}/${item.id}/`">
              <i class="el-icon-arrow-right"></i>
              <span slot="title">{{item.name}}</span>
            </el-menu-item>
          </el-menu>
        </el-col>
        <!-- 下拉框-->
      <el-col v-if="!(($route.params.type == 'enterprise' && ($route.params.id == '2' || $route.params.id == '3') || ($route.params.type == 'aboutus' && $route.params.id == '3')))" :span="18" :xs="24" class="body">
        <el-collapse v-if="info" v-model="activeName" accordion class="fxl-collapse">
          <el-collapse-item v-for="item in info" :key="item.id"  :name="item.id">
            <template slot="title">
              <div class="collapse-bg" :style="`background-image:url('${item.img}')`">
              </div>
              <div class="collapse-title ">
                <div>{{item.company_name || item.title}}</div> 
                 <div class="desc">
                {{item.synopsis || item.desc}}
              </div>
              <i class="el-icon-d-arrow-right arrow-icon"></i>
              </div>
             
            </template>
             <div  v-html="item.info" class="article">
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-col>
        <!-- 列表 -->
       <el-col style="position:relative; padding-bottom: 55px;" v-if="$route.params.type == 'enterprise' && ($route.params.id == '2' || $route.params.id == '3')" :span="18" :xs="24" class="news-list">
        <TabItem :item-data="info.results" :item-type="$route.params.type"></TabItem>
        <div  style="text-align: center; position: absolute; bottom: 20px; left: 0; width:100%">
          <el-pagination
                @current-change="handleCurrentChange"
                background
                layout="prev, pager, next"
                :page-size = "5"
                :total="info.count">
        </el-pagination>

        </div>
      </el-col>
      <!-- 发展历程 -->
      <el-col v-if="$route.params.type == 'aboutus' && $route.params.id == '3'" :span="18" :xs="24" class="news-list">
        <el-tabs v-model="tabActive">
          <el-tab-pane v-for="(item, index) in development" :key="item.id" :label="item.title" :name="`tab${index}`">
            <div class="el-tab-img">
              <img width=100% :src="item.img" />
              <div class="next" @click="nextTab(index)">
                <i class="el-icon-back"></i>
              </div>
            </div>
            <el-timeline style="margin-left: 20px; margin-top: 40px">
            <el-timeline-item
              icon="el-icon-time"
              >
            </el-timeline-item>
            <el-timeline-item
              v-for="(subitem, index) in item.essay"
              :key="index"
              >
              <div class="timeline-time">
                {{subitem.year}}年
              </div>
              <div class="timeline-synopsis">{{subitem.synopsis}}</div>
            </el-timeline-item>
          </el-timeline>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import TabItem from "../components/TabItem";
export default {
  data() {
    return {
      info: '',
      activeName: '',
      tabActive: 'tab0',
      development: '',
      nav: {
        aboutus: '关于我们',
        business: '公司产业',
        enterprise: '企业文化',
        hr: '人力资源'
      },
      navLeft: {
        business: [{
          name: '房地产板块',
          id: 1
        },
        {
          name: '物业管理板块',
          id: 2
        },
        {
          name: '旅游产业板块',
          id: 3
        },
        {
          name: '文化体育板块',
          id: 4
        },
        {
          name: '金融服务板块',
          id: 5
        }],
        aboutus: [{
          name: '公司简介',
          id: 1
        },
        {
          name: '公司架构',
          id: 2
        },
        {
          name: '发展历程',
          id: 3
        },
        {
          name: '社会责任',
          id: 4
        }],
        enterprise: [{
          name: '企业理念',
          id: 1
        },
        {
          name: '员工风采',
          id: 2
        },
        {
          name: '员工活动',
          id: 3
        }],
         hr: [{
          name: '人才理念',
          id: 1
        },
        {
          name: '招聘信息',
          id: 3
        }]
      }
    }
  },
  created() {
    this.init()

  },
  methods: {
    init() {
      if (this.$route.params.type == 'aboutus' && this.$route.params.id == '3') {
         this.$request({
          url: `/development/`
        }).then(result => {
          const { data } = result
          this.development = data
        })
      } else if (this.$route.params.type == 'enterprise') {
        this.getEnterpriseList(1)
      } else {
        this.$request({
         url: `/${this.$route.params.type}/?article_type=${this.$route.params.id}`
         }).then(result => {
           const { data } = result
          this.info = data
          if (data.length == 1) {
          this.activeName = data[0].id
          }
         })

      }
    },
     getEnterpriseList(page) {
        this.$request({
          url: `/${this.$route.params.id == 1? 'enterprise' :'enterprisetype23'}/?page=${page}&size=5&article_type=${this.$route.params.id}`
        }).then(result => {
          const { data } = result
          this.info = data
          if (data.length == 1) {
          this.activeName = data[0].id
          }
        })
    },
     handleCurrentChange(val) {
      this.getEnterpriseList(val)
    },
    nextTab(index) {
     let next = index+1 < this.development.length ? index+1 : '0'
     this.tabActive=`tab${next}`
    }
  },
  watch: {
    $route: function () {
      this.init()
    }
  },
  components: {
    TabItem
  }
}
</script>


<style lang="stylus">
.el-tabs__content
  overflow inherit
.el-tab-img
  position relative
  .next
    position absolute
    cursor pointer
    z-index: 55
    bottom 30px
    right: 0px
    width: 130px
    height: 70px
    margin-right -40px
    background: rgba(238,238,238,0.9)
    .el-icon-back
      position: absolute;
      right: 20px;
      top: 17px;
      color: #d3202aba;
      font-size: 42px;
      transform rotate(180deg)
.timeline-time
  position: relative;
  float: left;
  width: 76px;
  height: 30px;
  font-size: 16px;
  padding-left: 13px;
  line-height: 30px;
  color: #fff;
  background: url(../assets/img/about7_icon_this.png) no-repeat left center;
.timeline-synopsis
  font-size: 15px;
  font-weight 500
  padding-left: 89px;
  text-align justify;
  white-space pre-wrap;
.el-timeline-item__wrapper
  position: relative;
  padding-left: 28px;
  top: -10px;
  line-height: 30px;
  font-size 14px
  min-height: 30px;
.el-timeline-item
  padding-bottom 30px
  .el-timeline-item__tail
    border 1px solid #d3202a
.el-timeline-item__node--normal
  left: 1px;
  border 1px solid #d3202a
  width: 6px;
  height: 6px;
  background-color #fff
.el-timeline .el-timeline-item:first-child 
  .timeline-time
    display none
  .el-timeline-item__node--normal
    border none
    width: auto;
    height: auto;
    background-color: rgba(0,0,0,0);
    top: -28px;
    left: -10px;
  .el-timeline-item__icon
    font-size 30px
    color #d3202a
.fxl-collapse
  border none 
.collapse-bg
  width 620px
  height: 400px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
.el-collapse-item__header
  height 400px
  background-color: rgba(158, 158, 158, 0.1);
  border: none
  margin-bottom 20px
  border-radius: 3px;
  overflow hidden
.collapse-title
  font-size 19px
  height 100%
  width 300px
  box-sizing border-box
  padding-left 20px
  padding-top 20px
  padding-right 20px
  color #d3202a
  position relative
  .desc
    color #303133
    font-size 15px
    line-height 23px
  .arrow-icon
    position absolute
    bottom 20px
    right 20px
    font-size 35px
    font-weight 200
    color #606266
    transform: rotate(90deg);

.el-collapse-item__arrow
  display none
.info
  max-width 1160px
  width 100%
  min-height 600px
  margin 0 auto
  margin-top 98px
  padding 0 20px
  box-sizing border-box
  .news-nav
    .el-menu-item
      padding 0 !important
      margin 0 20px
      font-weight 500
      color #494949
      border-bottom 1px solid #a6a6a6
      &:last-child
        border none
    .el-menu-item.is-active
      color #d3202a
    .el-menu-item:focus, .el-menu-item:hover
      background-color #fff  
    .title-top
      box-sizing border-box
      width 100%
      border 1px solid #e8e8e8
      border-bottom 0
      padding 0 20px
      padding-top 20px
      h5
        color #000
        font-size 16px
        font-weight 400
        height 35px
        padding-top 13px
        line-height 20px
        box-sizing: border-box;
      p
        font-size 12px
        height 25px
        line-height 20px
        border-bottom 2px solid #a6a6a6

    .el-menu
      border 1px solid #e8e8e8
      border-top 0
      padding-bottom 20px

  .body
    padding 40px
    margin 0 auto
    text-align justify
    min-height: 646px;
    p
      margin-top 15px
    strong
      font-weight 800
    .article
      font-size 16px
      line-height 26px
      img
        height auto !important
        width 100% !important

@media (max-width 765px)
  .collapse-bg
    background-size: contain;
  .info
    margin-top 0
    .tac
      margin 0 !important
    .body
      padding 40px 0 !important
      p
        font-size 14px
      img
        width 100% !important
        height auto!important
    .el-collapse-item__header
      padding 0 20px
      height 200px
    .collapse-title
      padding-right 0
      font-size 16px
      width 100%
      .desc
        font-size 14px
      .arrow-icon
        font-size 25px
    .news-list
      overflow hidden
      padding 0 !important
    .timeline-synopsis
      font-size 14px
    .el-tab-img .next
      position: absolute;
      cursor: pointer;
      z-index: 55;
      bottom: 2px;
      right: 0px;
      width: 88px;
      height: 70px;
      margin: 0
      .el-icon-back
        font-size: 34px;
        top: 20px;


</style>
